<template>
  <section class="detail">
    <div class="left">
      <img-list :imgs="noteData.imgs"></img-list>
      <div class="content">
        <header>{{ noteData.title }}</header>
        <article v-html="noteData.content"></article>
      </div>
      <div class="date">发布于 {{ releaseDate }}</div>
    </div>

    <div class="right">
      <div class="slice">
        <header>笔记作者</header>
        <div class="avator">
          <div>
            <avatar
              :user-id="noteData.userId"
              :avatar="data.avatar"
              @click="goToUserPage"
            ></avatar>
          </div>
          <span>{{ data.name }}</span>
        </div>
      </div>

      <div class="slice">
        <header>评论</header>
        <!-- 评论区 -->
        <div class="note-list">
          <el-scrollbar>
            <comment
              v-for="item in commentData.data"
              :key="item.id"
              :avatar="item.avatar"
              :content="item.content"
              :user-name="item.userName"
            ></comment>
          </el-scrollbar>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:page-size="commentSearchTerms.pageSize"
            v-model:current-page="commentSearchTerms.pageIndex"
            small
            background
            layout="prev, pager, next"
            :total="commentData.count"
          ></el-pagination>
        </div>

        <div class="operate">
          <el-input
            v-model="commentForm.comment"
            size="small"
            placeholder="请输入评论"
          ></el-input
          ><el-button size="small" round type="primary" @click="sendComment"
            >发送</el-button
          >
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { autoMap } from '@core/utils';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { useApi } from '@core/http/api-instance';
import { useUrlSearchParams } from '@vueuse/core';
import ImgList from './components/imgs-list/imgs-list.vue';
import Avatar from '@pages/components/avatar/avatar.vue';
import { GetNoteDetailRes } from '@core/http/apis/note/models/GetNoteDetailRes';
import { GetCommentListRes } from '@core/http/apis/comment/models/GetCommentListRes';
import Comment from './components/comment.vue';

const api = useApi();
const releaseDate = ref();
const router = useRouter();
const commentSearchTerms = reactive({
  pageIndex: 1,
  pageSize: 10,
});
const commentForm = reactive({
  comment: '',
});
const commentData = ref<{ data: GetCommentListRes[]; count: number }>({
  data: [],
  count: 0,
});

const params = useUrlSearchParams();
const data = reactive({
  name: '',
  avatar: '',
});
// note信息
const noteData = reactive<Partial<GetNoteDetailRes>>({
  imgs: [],
  id: '',
  userId: '',
  title: '',
  favorite: 0,
  content: '',
  createDate: 0,
});

// methods

// 获得单个note信息
const getData = async () => {
  const resData = await api.note.getNoteDetail(params.id as string);
  releaseDate.value = dayjs(resData.createDate).format('YYYY-MM-DD HH:mm');
  // 赋值
  autoMap(resData, noteData);
  getUsrInfo();
};

const getUsrInfo = async () => {
  const resData = await api.user.getUserInfo(noteData.userId);
  data.avatar = resData.avatar;
  data.name = resData.name;
};

const goToUserPage = () => {
  router.push({ path: `/user/${noteData.userId}` });
};
//用户评论
const sendComment = async () => {
  try {
    await api.comment.insertComment(commentForm.comment, params.id as string);
    commentForm.comment = '';
    getComment();
  } catch (e) {
    ElMessage.warning(e instanceof Error && e.message);
  }
};

const getComment = async () => {
  const res = await api.comment.getCommentList(
    commentSearchTerms.pageIndex,
    commentSearchTerms.pageSize,
    params.id as string,
  );
  commentData.value.count = res.count;
  commentData.value.data = res.data;
};

watch(
  [() => commentSearchTerms.pageIndex, () => commentSearchTerms.pageSize],
  getComment,
);
getData();
getComment();
</script>

<style lang="scss" scoped>
.detail {
  display: flex;
  margin: 20px auto;
  width: max-content;
}

.content {
  width: 500px;
  margin-top: 20px;

  header {
    font-size: 20px;
    font-weight: 500;
    line-height: 50px;
  }
}

.date {
  color: #999;
  font-size: 16px;
  margin-top: 30px;
  white-space: pre-line;
}

.right {
  width: 300px;
  flex-shrink: 0;
  margin-left: 20px;

  .avator {
    display: flex;
    color: #000;
    font-size: 15px;
    margin-bottom: 30px;
    padding: 0 10px 0 10px;
    align-items: center;

    > div:first-child {
      cursor: pointer;
    }

    span {
      margin-left: 10px;
    }
  }

  .note-list {
    height: 500px;
  }

  .slice {
    color: #000;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border: 1px solid #eee;
    background-color: var(--white-color);

    header {
      font-size: 16px;
      font-weight: 500;
      padding: 10px 0 0 10px;
    }
  }

  .operate {
    display: flex;
    padding: 0 10px;

    button {
      margin-left: 10px;
    }
  }

  .pagination {
    margin: 10px 0px;
  }
}
</style>
